<template>
  <div style="margin-top: 20px">
    <el-row>
      <el-input v-model="input" placeholder="请输入姓名" style="width: 300px"></el-input>&nbsp;
      <el-button type="primary" @click="handleSearch" icon="el-icon-search">查询</el-button>
      <el-button @click="dialogFormVisible = true" type="warning" icon="el-icon-circle-plus-outline">新增</el-button>
    </el-row>
    <br />
    <div>
      <el-table
        v-loading="loading"
        :data="tableData.slice((currentPage-1)*pageSize,currentPage*pageSize)"
        border>
        <el-table-column
          prop="id"
          label="套餐编号"
          width="120"
          v-if="false">
        </el-table-column>
        <el-table-column
          prop="code"
          label="套餐编码"
          width="120">
        </el-table-column>
        <el-table-column
          prop="name"
          label="套餐名"
          width="250">
        </el-table-column>
        <el-table-column
          prop="helpCode"
          label="助记名"
          width="120">
        </el-table-column>
        <el-table-column
          prop="sex"
          label="适用性别"
          width="120">
        </el-table-column>
        <el-table-column
          prop="age"
          label="适用年龄"
          width="120">
        </el-table-column>
        <el-table-column
          prop="price"
          label="套餐价格"
          width="120">
        </el-table-column>
        <el-table-column
          prop="remark"
          label="套餐介绍"
          width="300">
        </el-table-column>
        <el-table-column
          fixed="right"
          label="操作"
          width="300">
          <template v-slot="scope">
            <el-button @click="Updates(scope.row.id)" type="warning" size="small" icon="el-icon-edit">编辑</el-button>
            <el-button @click="deleteRow(scope.row.id)" type="danger" size="small" icon="el-icon-delete">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="currentPage"
        :page-sizes="[5, 10, 15, 20]"
        :page-size="pageSize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="tableData.length">
      </el-pagination>
    </div>
    <div>
      <el-dialog title="添加" :before-close="openUAdd" :visible.sync="dialogFormVisible">
        <el-form :inline="true" :model="form" class="demo-form-inline" style="flex: 1;">
        <el-tabs  v-model="activeName" type="card" @tab-click="addhandleClick">
          <el-tab-pane label="基本信息" name="first">
            <el-form :inline="true" :model="form" class="demo-form-inline">

          <el-form-item label="套餐编码"  style="width: 45%;" class="custom-margin">
            <el-input v-model="form.packagecoding"
                      autocomplete="off"
                      placeholder="套餐编码"
                      style="margin-left: 20px;"
                      class="custom-input "></el-input>
          </el-form-item>



          <el-form-item label="套餐名称" class="custom-margin" style="width: 40%">
            <el-input v-model="form.packagename"
                      autocomplete="off"
                      style="margin-left: 20px;"
                      class="custom-input "></el-input>
          </el-form-item>
          <el-form-item label="套餐助记" class="custom-margin" style="width: 45%">
            <el-input v-model="form.mnemonicname"
                      autocomplete="off"
                      placeholder="套餐助记"
                      style="margin-left: 20px;"
                      class="custom-input"></el-input>
          </el-form-item>
          <el-form-item label="适用性别" class="custom-margin" style="width:45%">
            <el-select v-model="form.applytogender"
                       placeholder="不限"
                       style="margin-left: 20px;"
                       class="custom-input "
                       clearable >
              <el-option label="男" value="男"></el-option>
              <el-option label="女" value="女"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="年龄下限" class="custom-margin" style="width: 45%">
          <el-input v-model="form.agexx" autocomplete="off" style="margin-left: 20px;" class="custom-input "></el-input>
        </el-form-item>
          <el-form-item label="年龄上限" class="custom-margin" style="width: 45%">
            <el-input v-model="form.agesx" autocomplete="off" style="margin-left: 20px;" class="custom-input "></el-input>
          </el-form-item>
          <el-form-item label="套餐价格" class="custom-margin" style="width: 45%">
            <el-input v-model="form.packageprice" autocomplete="off" style="margin-left: 20px;" class="custom-input "></el-input>
          </el-form-item>

              <el-form-item label="上传照片:" class="custom-margin" style="width: 45%">
                <el-upload style="margin-left: 20px;"
                           class="custom-input "
                           action="string"
                           multiple
                           :auto-upload="false"
                           :limit="3"
                           :file-list="fileList"
                           :on-preview="handlePreview"
                           :on-remove="handleRemove"
                           :before-remove="beforeRemove"
                           :on-exceed="handleExceed"
                           :on-change="handleFileChange"
                >
                  <el-button size="small" type="primary">点击上传</el-button>

                </el-upload>
              </el-form-item>
          <el-form-item label="套餐介绍" class="custom-margin" style="width: 45%">
            <el-input
              type="textarea"
              :rows="2"
              placeholder=""
              v-model="form.introduce"
              style="margin-left: 20px;"
              class="custom-input ">
            </el-input>
          </el-form-item>
          <el-form-item label="注意事项" class="custom-margin" style="width: 45%">
            <el-input
              type="textarea"
              :rows="2"
              placeholder=""
              v-model="form.note"
              style="margin-left: 20px;"
              class="custom-input ">
            </el-input>
          </el-form-item>
        </el-form>
          </el-tab-pane>
          <el-tab-pane label="项目信息" name="second">
            <el-select clearable v-model="tjregion" placeholder="项目" @change="queryProjectInfo">
              <el-option label="项目组" value="xmz"></el-option>
            </el-select>
            &nbsp;&nbsp;&nbsp;
            <el-input v-model="input" placeholder="请输入姓名" style="width: 300px"></el-input>&nbsp;
            <el-button type="primary" icon="el-icon-search">查询</el-button>
            <hr/>
            <template>
              <div v-if="tjregion !== 'xmz'">
              <el-table
                ref="jcxtable"
                v-loading="loading"
                :data="xmtableData"
                border
                style="width: 100%; max-height: 300px; overflow: auto;"
                @selection-change="handleSelectionChange">
                <el-table-column
                  type="selection"
                  width="55">
                </el-table-column>
                <el-table-column
                  prop="checkitemcode"
                  label="项目编码"
                  width="180">
                </el-table-column>
                <el-table-column
                  prop="checkitemname"
                  label="项目名称"
                  width="180">
                </el-table-column>
                <el-table-column
                  prop="checkitemremark"
                  label="项目介绍">
                </el-table-column>
                <el-table-column
                  prop="checkgroupname"
                  label="项目组名称">
                </el-table-column>
              </el-table>
              </div>

              <div v-if="tjregion == 'xmz'">
                <el-table
                  ref="xmzjcxtable"
                  v-loading="loading"
                  :data="xmztableData"
                  border
                  style="width: 100%; max-height: 300px; overflow: auto;"
                  @selection-change="xmzhandleSelectionChange">
                  <el-table-column
                    type="selection"
                    width="55">
                  </el-table-column>
                  <el-table-column
                    prop="checkgroupcode"
                    label="项目组编码"
                    width="180">
                  </el-table-column>
                  <el-table-column
                    prop="checkgroupname"
                    label="项目组名称"
                    width="180">
                  </el-table-column>
                  <el-table-column
                    prop="checkgroupremark"
                    label="项目组介绍">
                  </el-table-column>
                  <el-table-column
                    prop="checkitemnumber"
                    label="项目数量">
                  </el-table-column>
                </el-table>
              </div>
            </template>

          </el-tab-pane>
        </el-tabs>
        </el-form>
        <div slot="footer" class="dialog-footer">
          <el-button @click="openUAdd()">取 消</el-button>
          <el-button type="primary" @click="tjopenOk();dialogFormVisible = false">确 定</el-button>
        </div>
      </el-dialog>
    </div>
    <div>
      <el-dialog title="修改" :before-close="openUpdate" :visible.sync="UpdateData">
        <el-form :model="updateform" :inline="true"  class="demo-form-inline" style="flex: 1;">
        <el-tabs v-model="activeName" type="card" @tab-click="handleClick">
          <el-tab-pane label="基本信息" name="first">
            <el-form :inline="true" :model="updateform" class="demo-form-inline">

              <el-form-item label="套餐编码"  style="width: 45%;" class="custom-margin">
                <el-input v-model="updateform.Packagecoding"
                          autocomplete="off"
                          placeholder="套餐编码"
                          style="margin-left: 20px;"
                          class="custom-input "></el-input>
              </el-form-item>



              <el-form-item label="套餐名称" class="custom-margin" style="width: 40%">
                <el-input v-model="updateform.Packagename"
                          autocomplete="off"
                          style="margin-left: 20px;"
                          class="custom-input "></el-input>
              </el-form-item>
              <el-form-item label="套餐助记" class="custom-margin" style="width: 45%">
                <el-input v-model="updateform.Mnemonicname"
                          autocomplete="off"
                          placeholder="套餐助记"
                          style="margin-left: 20px;"
                          class="custom-input"></el-input>
              </el-form-item>
              <el-form-item label="适用性别" class="custom-margin" style="width:50%">
                <el-select v-model="updateform.Applytogender"
                           placeholder="不限"
                           style="margin-left: 20px;"
                           class="custom-input "
                           clearable >
                  <el-option label="男" value="男"></el-option>
                  <el-option label="女" value="女"></el-option>
                </el-select>
              </el-form-item>
              <el-form-item label="年龄下限" class="custom-margin" style="width: 45%">
                <el-input v-model="updateform.agexx" autocomplete="off" style="margin-left: 20px;" class="custom-input "></el-input>
              </el-form-item>
              <el-form-item label="年龄上限" class="custom-margin" style="width: 45%">
                <el-input v-model="updateform.agesx" autocomplete="off" style="margin-left: 20px;" class="custom-input "></el-input>
              </el-form-item>
              <el-form-item label="套餐价格" class="custom-margin" style="width: 45%">
                <el-input v-model="updateform.Packageprice" autocomplete="off" style="margin-left: 20px;" class="custom-input "></el-input>
              </el-form-item>

              <el-form-item label="上传照片:" class="custom-margin" style="width: 45%">
                <el-upload style="margin-left: 20px;"
                           class="custom-input "
                           action="https://jsonplaceholder.typicode.com/posts/"
                           multiple
                           :limit="3"
                           :file-list="fileList"
                           :on-preview="handlePreview"
                           :on-remove="handleRemove"
                           :before-remove="beforeRemove"
                           :on-exceed="handleExceed">
                  <el-button size="small" type="primary">点击上传</el-button>
                </el-upload>
              </el-form-item>
              <el-form-item label="套餐介绍" class="custom-margin" style="width: 45%">
                <el-input
                  type="textarea"
                  :rows="2"
                  placeholder=""
                  v-model="updateform.introduce"
                  style="margin-left: 20px;"
                  class="custom-input ">
                </el-input>
              </el-form-item>
              <el-form-item label="注意事项" class="custom-margin" style="width: 45%">
                <el-input
                  type="textarea"
                  :rows="2"
                  placeholder=""
                  v-model="updateform.note"
                  style="margin-left: 20px;"
                  class="custom-input ">
                </el-input>
              </el-form-item>
            </el-form>
          </el-tab-pane>
          <el-tab-pane label="项目信息" name="second">
            <el-select clearable v-model="updateform.region" placeholder="项目">
              <el-option label="项目组" value="xmz"></el-option>
            </el-select>
            &nbsp;&nbsp;&nbsp;
            <el-input v-model="input" placeholder="请输入姓名" style="width: 300px"></el-input>&nbsp;
            <el-button type="primary" icon="el-icon-search">查询</el-button>
            <hr/>
            <template>
              <el-table
                style="width: 100%">
                <el-table-column
                  label="项目编码"
                  width="180">
                </el-table-column>
                <el-table-column
                  label="项目名称"
                  width="180">
                </el-table-column>
                <el-table-column
                  label="项目介绍">
                </el-table-column>
                <el-table-column
                  label="删除">

                  <template slot-scope="scope">
                    <el-popconfirm

                      confirm-button-text='确认'
                      cancel-button-text='取消'
                      icon="el-icon-warning-outline"
                      icon-color="red"
                      title="你确定要删除这个项目吗？"
                      @onConfirm="cancelreservation(scope.$index, scope.row)"
                    >

                      <el-button
                        size="mini"
                        type="text"
                        slot="reference">删除
                      </el-button>


                    </el-popconfirm>
                  </template>

                </el-table-column>
              </el-table>
            </template>

          </el-tab-pane>
        </el-tabs>
        </el-form>
        <div slot="footer" class="dialog-footer">
          <el-button @click="openUpdate()">取 消</el-button>
          <el-button type="primary" @click="openOk('修改成功');UpdateData = false">确 定</el-button>
        </div>
      </el-dialog>
    </div>
  </div>

</template>



<script>
import axios from "axios";
import row from "mockjs";

export default {

  beforeCreate() {
    console.log('beforeCreate: 页面加载前执行方法')
    axios.get('api/package/findAll').then(res => {
      console.log(res)
      this.tableData1=res.data.data;
      this.tableData = res.data.data
      console.log(this.tableData.length)
    })
  },


  methods: {
    handleSelectionChange(rows) {
      console.log("项目复选框选中时方法")

      console.log("rows长度========"+rows.length )
      console.log("之前选中的项目长度========"+this.selectedRows.length )
      if (rows.length === 0 && this.selectedRows.length === 0) {
        console.log("是否清空")

        this.selectedRows = [];
      }

      this.xzdxm = rows;
      if (rows.length > 0) {
        this.selectedRows = rows;
      }

    },
    xmzhandleSelectionChange(rows) {
      console.log("项目组复选框选中时方法")



      if (this.xmztableData1.length ===  this.xmzselectedRows.length) {
        this.xmzselectedRows = [];
      }

      this.xzdxmz = rows;
      if (rows.length > 0) {
        this.xmzselectedRows = rows;
      }

      console.log("rows========"+rows.length  )
      console.log("选中的项目组========"+this.xmzselectedRows.length )
      console.log("this.xzdxmz.length========"+this.xzdxmz.length )

      if (rows.length === 0 && this.xmzselectedRows.length === 0) {
        this.xmzselectedRows = [];

      }



      console.log("筛选之前的长度========"+this.xmtableData.length )
      const selectedIds = this.xmzselectedRows.map(item => item.checkgroupname);
      console.log("选中的项目组长度========"+this.xmzselectedRows.length )

      if (rows && rows.length > 0) {

        // 更新项目表格数据
        this.sxzhxmzselectedRows = this.xmtableData1.filter((item) => {

          return !selectedIds.includes(item.checkgroupname);
        });

        this.xmtableData = this.sxzhxmzselectedRows
      } else {

        this.xmtableData = this.xmtableData1
        this.sxzhxmzselectedRows = [];
      }

      console.log("筛选之后的长度========"+this.xmtableData.length )


    },


    addhandleClick() {
      console.log("切换选项卡方法")


        // 为空的处理逻辑
        axios.get('api/package/findCheckitemVOAll').then(res => {

            this.xmtableData1 = res.data.data;
          console.log("this.xmzselectedRows.length======"+this.xmzselectedRows.length);

            if ( this.xzdxmz.length > 0) {

              this.xmtableData = this.sxzhxmzselectedRows

            } else {
              this.xmtableData = res.data.data;
            }
          console.log("查询的项目结果集长度======"+this.xmtableData.length);

          // 将之前选中的行数据重新选中
          const selectedIds = this.selectedRows.map(item => item.checkitemcode);
          const xzdxm = this.xzdxm.map(item => item.checkitemcode);
          console.log("selectedRows项目编号======"+selectedIds);
          console.log("xzdxm项目编号======"+xzdxm);
          const xmzselectedIds = this.xmzselectedRows.map(item => item.checkgroupcode);
          const xzdxmz = this.xzdxmz.map(item => item.checkgroupcode);
          console.log("xmzselectedIds项目组编号======"+xmzselectedIds);
          console.log("xzdxmz项目组编号======"+xzdxmz);

          // 将之前选中的复选框重新选中
          this.$nextTick(() => {
            const tableInstance = this.$refs.jcxtable;


            selectedIds.forEach(code => {
              const row = this.xmtableData.find(item => item.checkitemcode === code);
              if (row) {
                tableInstance.toggleRowSelection(row, true);
              }
            });
          });
        });





    },
    queryProjectInfo() {
      console.log("下拉框选中方法")

      if (this.xzdxmz.length === 0) {
        this.xmzselectedRows = [];

      }

      this.$nextTick(() => {


      this.addhandleClick();
      axios.get('api/package/findCheckgroupVOAll').then(res => {

        this.xmztableData1 = res.data.data;
        this.xmztableData = res.data.data;

        const xmzselectedIds = this.xmzselectedRows.map(item => item.checkgroupcode);
        const xzdxmz = this.xzdxmz.map(item => item.checkgroupcode);

        console.log("xmzselectedIds项目组编号======"+xmzselectedIds);
        console.log("xzdxmz项目组编号======"+xzdxmz);

        // 将之前选中的复选框重新选中
        this.$nextTick(() => {
          const tableInstance = this.$refs.xmzjcxtable;


          xmzselectedIds.forEach(code => {
            const row = this.xmztableData.find(item => item.checkgroupcode === code);
            if (row) {
              tableInstance.toggleRowSelection(row, true);
            }
          });
        });
      });
      });
    },
    handleClick(row) {
      console.log(row);
    },
    handleSizeChange(val) {
      this.pageSize = val
      console.log(`每页 ${val} 条`);
    },
    handleCurrentChange(val) {
      this.currentPage=val;
      console.log(`当前页: ${val}`);
    },
    handleSizeChanges(val) {
      this.pageSizes = val
      console.log(`每页 ${val} 条`);
    },
    handleCurrentChanges(val) {
      this.currentPages=val;
      console.log(`当前页: ${val}`);
    },
    deleteRow(id) {
      alert(id);

      axios.post('api/package/sctc', {
        id: id,
      }).then(res => {
        console.log("666")

        this.tableData = [];
        this.tableData1 = [];
        this.cxsytc();
      });



    }
    , open() {
      this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.$message({
          type: 'success',
          message: '删除成功!'
        });
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除'
        });
      });
    },
    Updates(Packagecoding){

      this.UpdateData = true;
      let data = this.tableData.find((da)=>da.id === Packagecoding);

      this.updateform.Packagecoding = data.code;
      this.updateform.Packagename=data.name;
      this.updateform.Mnemonicname=data.helpCode;
      this.updateform.Applytogender=data.sex;
      console.log(`data.Applicableage=====`+data.sex);

      let ageLimits = data.age.split("-");
      let lowerLimit = parseInt(ageLimits[0]);//年龄下限
      let upperLimit = parseInt(ageLimits[1]);//年龄上限

      this.updateform.agexx=lowerLimit;
      this.updateform.agesx=upperLimit;
      this.updateform.Packageprice=data.price;
      this.updateform.introduce=data.remark;
      this.updateform.note=data.attention;
    },
    openUpdate() {
      this.$confirm('是否退出修改?', '确认信息', {
        distinguishCancelAndClose: true,
        confirmButtonText: '取消',
        cancelButtonText: '退出'
      })
        .then(() => {
          this.$message({
            type: 'info',
            message: '放弃退出,继续修改'
          });
        })
        .catch(action => {
          this.$message({
            type: 'info',
            message: action === 'cancel'
              ? '放弃修改并离开页面'
              : '停留在当前页面'
          })
          if(action!=='close') {
            this.UpdateData = false
          }
        });
    },

    qktjym() {

      this.form = {}; // 清空表单数据
      this.xzdxm = [];// 清空选中的项目
      this.xzdxmz = [];// 清空选中的项目组
      this.selectedRows = []; // 清空项目复选框选择项
      this.xmzselectedRows = [];// 清空项目组复选框选择项
      this.tjregion="";//清空下拉框
      this.xmtableData = this.xmtableData1//恢复项目行
      this.fileList = [];//清空选择的文件

    },

    openUAdd() {
      this.$confirm('是否退出添加?', '确认信息', {
        distinguishCancelAndClose: true,
        confirmButtonText: '取消',
        cancelButtonText: '退出'
      })
        .then(() => {
          this.$message({
            type: 'info',
            message: '放弃退出,继续添加'
          });
        })
        .catch(action => {
          this.$message({
            type: 'info',
            message: action === 'cancel'
              ? '放弃添加并离开页面'
              : '停留在当前页面'
          })
          if(action!=='close') {
            this.dialogFormVisible = false

            this.qktjym();//清空添加页面

          }
        });
    },
    opensaves() {
      this.$confirm('是否退出保存?', '确认信息', {
        distinguishCancelAndClose: true,
        confirmButtonText: '取消',
        cancelButtonText: '退出'
      })
        .then(() => {
          this.$message({
            type: 'info',
            message: '放弃退出'
          });
        })
        .catch(action => {
          this.$message({
            type: 'info',
            message: action === 'cancel'
              ? '放弃保存并离开页面'
              : '停留在当前页面'
          })
          if(action!=='close') {
            this.opensave = false
          }
        });
    },
    handleFileChange(file, fileList) {
      // fileList 参数即为文件列表
      const files = event.target.files;
      this.fileList = Array.from(files);

      console.log(this.fileList[0]);

      // 其他逻辑处理
      // ...
    },
    tjopenOk() {
      // 创建一个 FormData 对象
      let formData = new FormData();


      console.log("wj============", this.fileList[0]);
      console.log("this.selectedRows============", this.selectedRows);


      formData.append('file', this.fileList[0]);
      formData.append('checkitemVO', JSON.stringify(this.xzdxm));
      formData.append('checkgroupVO', JSON.stringify(this.xzdxmz));



      for (let key in this.form) {
        if (this.form.hasOwnProperty(key)) {
          formData.append(key, this.form[key]);
        }
      }
      // 发送请求
      axios.post('api/package/addPackage', formData, {
        headers: {
          'Content-Type': 'multipart/form-data' // 设置请求头 Content-Type
        }
      }).then(res => {
          // 请求成功的回调函数
          if (res.data === "SUCCESS") {
            this.$notify({
              title: '成功',
              message: '提交成功',
              type: 'success',
              duration: 1000

            });
          }
        this.tableData = [];
        this.tableData1 = [];
        this.cxsytc();
        })
        .catch(error => {
          // 处理请求失败的情况

          if (error.response && error.response.data) {
            console.error(error.response.data);
            // 输出服务器返回的具体错误消息
          }

          this.$notify({
            title: '失败',
            message: `提交失败：${error.message || error}`,
            type: 'error',
            duration: 1000
          });
        });

      this.qktjym();//清空添加页面
      this.dialogFormVisible = false

    },

    handleSearch() { // 搜索按钮点击事件
      console.log("获取输入框的值====="+this.input);

      this.tableData=this.tableData1;
      let listtable=[];
      if(this.input) {
        this.tableData.filter((item) => {

          console.log("套餐名称======="+item.name);

          if(item.name.indexOf(this.input)!==-1){

            listtable.push(item)
          }


        })
      }
      else{
        this.cxsytc();
      }
      console.log("搜索结果======="+listtable);

      this.tableData=listtable;

    },
    cxsytc() {

      axios.get('api/package/findAll').then(res => {
        console.log(res)
        this.tableData = res.data.data
        console.log(this.tableData.length)
      })
    },


    beforeRemove(file, fileList) {
      // 在移除文件前的操作逻辑
      console.log(`在移除文件前的操作逻辑`);
      return this.$confirm(`确定移除 ${file.name}？`);

    },
    handlePreview(file) {
      // 在预览文件时的操作逻辑
      console.log(`在预览文件时的操作逻辑`);

    },
    handleExceed(files, fileList) {
      // 在选择文件数量超出限制时的操作逻辑
      console.log(`在选择文件数量超出限制时的操作逻辑`);
      this.$message.warning('文件数量超过限制，请删除多余的文件');

    },
    handleRemove() {
      // 处理移除操作的逻辑
      console.log(`处理移除操作的逻辑`);
      // 从fileList中移除该文件
      const index = this.fileList.indexOf(file);
      this.fileList.splice(index, 1);
      console.log(this.fileList);
    },
    uploadFiles() {
      const formData = new FormData();
      this.fileList.forEach((file, index) => {
        formData.append(`file${index}`, file.raw);
      });

      axios.post('https://jsonplaceholder.typicode.com/posts/', formData)
        .then(response => {
          // 处理上传成功的逻辑
          console.log(response);
          this.$message.success('文件上传成功');
        })
        .catch(error => {
          // 处理上传失败的逻辑
          console.error(error);
          this.$message.error('文件上传失败');
        });
    }


  },
  data() {
    return {
      textarea:'',
      fileList: [],
      formLabelWidth: '120px',//from表单控件长度
      currentPage4:1,
      jkgl:'',
      checkList: [],
      activeName: 'first',
      opensave: false,
      UpdateData:false,
      dialogFormVisible:false,
      currentPage: 1,
      input:'',
      pageSize: 5,
      totalNum:10,
      currentPages: 1,
      inputs:'',
      pageSizes: 5,
      totalNums:10,
      loading: false,


      jkglsoptions:[{
        jkgl: '选项1',
        label: '黄金糕'
      }, {
        jkgl: '选项2',
        label: '双皮奶'
      }, {
        jkgl: '选项3',
        label: '蚵仔煎'
      }, {
        jkgl: '选项4',
        label: '龙须面'
      }, {
        jkgl: '选项5',
        label: '北京烤鸭'
      }],




      form:{
        packagecoding:'',
        packagename:'',
        mnemonicname:'',
        applytogender:'',
        agesx:'',
        agexx:'',
        packageprice:'',

        introduce:'',
        note:''

      },
      updateform:{
        Packagecoding:'',
        Packagename:'',
        Mnemonicname:'',
        Applytogender:'',

        agesx:'',//年龄上限
        agexx:'',//年龄下限
        Packageprice:'',//套餐价格

        introduce:'',//套餐介绍
        note:'',//注意事项
        img: ''//图片
      },
      tableData: [],
      tableData1: [],
      xmtableData:[],
      xmtableData1:[],
      xmztableData:[],
      xmztableData1:[],
      selectedRows: [],
      xzdxm:[],
      xzdxmz:[],
      xmzselectedRows: [],
      sxzhxmzselectedRows: [],

      tjregion:"",
      selectedXmzRow: null
    }
  }
}
</script>
